<template>
  <div>
    <h2>vue3组件通信</h2>
    <hr>
    <hz :count="count" title="1234" @change-count="changeCount" ></hz>
  </div>
</template>

<script>
import { ref } from 'vue'
/**
 * 组件通信：
 * 思想：单向数据流
 * 1. 父传子：
 *    步骤：
 *    1. 父里定义变量传给子=》 <Child :变量名1="变量" />
 *    2. setup函数的第一个参数：props对象接收变量
 *
 * 2. 子传父：
 *    步骤：
 *    1. 父里定义事件回调函数：<Child @事件名="事件回调" />
 *    2. 子里触发事件回调函数：setup函数第二个参数：context.emit('事件名',data)
 *
 */
import hz from './hz.vue'
export default {
  components: {
    hz
  },
  setup () {
    const count = ref(1e4)
    // 修改count=>子组件触发
    const changeCount = () => {
      count.value++
    }
    return { count, changeCount }
  }
}
</script>

<style lang="scss" scoped>
</style>
